<template>
  <Select v-model:value="server" :options="options" style="width: 240px; position: absolute; top: 2px; right: 10px">
    
  </Select>
  <div class="shell headers" style="height: 145px">
    <p v-for="d of headers" v-html="replaceWhitespace(d)"></p>
  </div>
  <div class="shell details" :style="{ height: maxHeight - 150 + 'px', maxHeight: maxHeight - 150 + 'px' }">
    <p v-for="d of details" v-html="replaceWhitespace(d)"></p>
  </div>
</template>
<script setup>
  import { ref, inject, computed, watch, onMounted } from 'vue';
  import { Select } from 'ant-design-vue';

  import { replaceWhitespace } from '@/libs/helpers';

  const props = defineProps({
    maxHeight: Number
  });

  const $http = inject('$http');

  const server = ref('');
  const options = ref([]);
  const processList = ref([]);

  const headers = computed(() => {
    let list = processList.value;

    return !list ? [] : list.slice(0, 6);
  });

  const details = computed(() => {
    let list = processList.value;

    return !list
      ? []
      : list.slice(6, list.length).sort((x, y) => {
          let xstart = x.lastIndexOf(' ') + 1;
          let ystart = y.lastIndexOf(' ') + 1;

          let sort = 0;

          if (x.substring(xstart) > y.substring(ystart)) {
            sort = 1;
          } else if (x.substring(xstart) < y.substring(ystart)) {
            sort = -1;
          }

          return sort;
        });
  });

  async function getConfigs() {
    options.value.length = 0;

    let res = await $http.get('/api/trac/configs');

    options.value = (res.datas || []).map(d => {
      return { label: d.Description, value: d.Value };
    });
  }

  async function getProcess() {
    processList.value = [];

    let res = await $http.get(`/api/shell/process?type=${server.value}`);

    processList.value = res.datas;
  }

  watch(server, async () => await getProcess());

  onMounted(async () => {
    await getConfigs();

    await getProcess();
  });
</script>
